<extend name="Base/common" />

<block name="style">
    <load  href="__PUBLIC__/Home/css/public.css" />
    <load  href="__PUBLIC__/Home/css/login.css" />

    <!-- 罩 -->
    <load  href="__PUBLIC__/Home/css/user/qikoo.css" />
    <load  href="__PUBLIC__/Home/css/user/store.css" />

    <!-- 遮罩层插件 -->
    <script src="__PUBLIC__/Home/js/user/jquery.min.js"></script>
    <script src="__PUBLIC__/Home/js/user/qikoo.js"></script>

    <!-- cookie插件 -->
    <script src="__PUBLIC__/Home/js/user/jquery.cookie.js" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/js/user/jquery.min.js"></script>

</block>

<block name="body">
<section>
    <style>
        body{
            background: white;
        }
        .item input {
            background:white;
        }

    </style>

    <div class="login-regisBox" >
            <div class="login-wrapper" style="margin-top:80px;">
                <h3 class="h3-style mt40">登 录</h3>
                <!-- 登录表单开始 -->
                <form action="{:U('Home/User/login')}" method="post" class="login_for"  >
                    <div id="itemBox" >
                        <!-- 用户名 -->
                        <div class="item" >
                            <i class="icon-login-user"></i>
                            <input type="text" name="username" id="username"  placeholder="*用户名"  name="username" autocomplete="off"/>
                        </div>
                        <span class="placeholder_copy un"></span>
                        <!-- 密码 -->
                        <div class="item">
                            <i class="icon-login-pwd"></i>
                            <input type="password" name="password"  id="password"  placeholder="*密码" autocomplete="off"/>
                        </div>
                        <span class="placeholder_copy pwd"></span>

                        <!-- 验证码 -->
                        <div class="verifycode" id="item">
                            <i class="icon-login-verifycode"></i>
                            <input type="text" name="verify" id="verify"
                             placeholder="*验证码"  autocomplete="off">
                            <a class="reloadverify" title="换一张" href="javascript:void(0)">换一张？</a>
                        </div>
                        <img class="verifyimg reloadverify" alt="点击切换..." src="{:U('verify')}">

                        <span class="placeholder_copy check"></span>
                        <!-- 记住我的信息 -->
                        <div class="rember-box">
                            <input type="checkbox" name="remberinfo" id="remberinfo"/>
                            <label class="remberinfo"  for="remberinfo">记住我的信息</label>
                        </div>
                    </div>

                    <!-- 登录 -->
                    <span id="check" style="display:block;font-size:15px;color:red;width:100%;height:20px;"></span>
                    <div class="w320">

                        <button type="submit" class="login-btn subz"><span>登 录 &gt;&gt;</span></button>
                    </div>
                    <a href="#" class="forgetpwd mt20">忘记密码?</a>
                </form>
            <!-- 登录表单结束 -->
            </div>
            <div class="regis-wrapper" style="margin-top:80px;">
                <h3 class="h3-style">创建账户</h3>
                <div class="mt20">
                    <p class="regisTit mt20">注册用户并完善个人信息，即可享受帐户的好处：</p>
                    <ul class="advantage mt20">
                        <li><span class="great-icon"></span>只需1分钟即可完成创建</li>
                        <li><span class="great-icon"></span>安全快捷支付订单</li>
                        <li><span class="great-icon"></span>随时跟踪订单状态</li>
                        <li><span class="great-icon"></span>即时收到打折优惠及新品发布信息</li>
                    </ul>
                    <button class="regis-btn w320 mt20"><a href="{:U('User/register')}"  style="text-decoration:none;"><span>注 册 &gt;&gt;</span></a></button>
                </div>
            </div>
        </div>
</section>

<script type="text/javascript">

        $(function(){
            var ok1 = false;
            var ok2 = false;
            var ok3 = false;

            // js验证---用户名
            $("#username").blur(function(){
                if($('#username').val().length == 0){
                    $('.un').html("请输入用户名");
                }else{
                    $('.un').html("");
                    ok1 = true;
                }
            });

            $("#username").keypress(function(e) {
                if (e.keyCode === 13) {
                    $(".login-btn").click();
                    return false;
                }
            });

            // js验证---密码
            $("#password").blur(function(){
                if($('#password').val().length < 5){
                    $('.pwd').html("请输入6位以上的密码");
                }else{
                    $('.pwd').html("");
                    ok2 = true;
                }
            });

            $("#password").keypress(function(e) {
                if (e.keyCode === 13) {
                    $(".login-btn").click();
                    return false;
                }
            });



            // js验证---验证码
            $("#verify").blur(function(){
                if($(this).val().length !== 4){
                    $('.check').html("请输入验证码");
                }else{
                    $('.check').html("");
                    ok3 = true;
                }
            });

            $("#verify").keypress(function(e) {
                if (e.keyCode === 13) {
                    $(".login-btn").click();
                    return false;
                }
            });

            // 刷新验证码
            $(".reloadverify").click(function(){
                var verifyimg = $(".verifyimg").attr("src");
                var verifyimg = $(".verifyimg").attr("src" , verifyimg);
            });


            $('.login-btn').click(function(){

                if($('#username').val().length == 0){
                    // $('.un').html("请输入用户名");
                }else{
                    $('.un').html("");
                    ok1 = true;
                }


                if($('#password').val().length < 5){
                    // $('.pwd').html("请输入5位以上的密码");
                }else{
                    $('.pwd').html("");
                    ok2 = true;
                }

                if($("#verify").val().length !== 4){
                    // $('.check').html("请输入验证码");
                }else{
                    $('.check').html("");
                    ok3 = true;
                }

                if (ok1 && ok2 && ok3) {

                    var username = $('#username').val();
                    var password = $('#password').val();
                    var verify = $('#verify').val();

                    $.post("{:U('Home/User/login')}", { username: username, password: password , verify : verify  },function(data){
                        if (data) {
                            $('#check').html(data).css('color' , 'red');

                            // 失败重新加载验证码
                            var verifyimg = $(".verifyimg").attr("src");
                            $(".verifyimg").attr("src" , verifyimg);

                        }else{
                            $('#check').html('');
                            // 三秒跳主页
							setTimeout(function(){
                                window.location.href = "{:U('Home/index/index')}";
                            } , 3000);

                            //引入遮罩层
                            $(document.body).height('');

                            $('<div id="zhao"></div>').css({
                                'width': $(window).width() + 'px',
                                'height': $(window).height() + 'px',
                                'background' : 'black',
                                'position': 'fixed',
                                'left' : 0,
                                'top' : 0,
                                'opacity' : 0.5,
                                'z-index' : 1,
                            }).appendTo( $(document.body) );

                            $(

                                '<div style="width:600px;height:300px;border:1px solid white; background:white;border-radius:10px;box-shadow:10px;"><div><img src="__PUBLIC__/Home/images/login_success.jpg"/></div></div>'
                                ).css({
                                'width' : 600 + 'px',
                                'height' : 400 + 'px',
                                'position': 'fixed',
                                'top' : 184 + 'px',
                                'left' : 383 + 'px',
                                'z-index' : 10,
                            }).appendTo( $(document.body) );

                        }

                    });
                }else{
                    $('#check').html('请填写完整').css('color' , 'red');
                    return false;
                }
                return false;
            });

        });

    </script>








</block>

<block name="script">


</block>
